<template>
  <!-- aside -->
  <aside id="aside" class="app-aside hidden-xs" :class="sildeColor">
    <div class="app-aside-inner ng-scope affix-top" bs-affix style="position: relative;">
      <!-- uiView: aside@ -->
      <div class="app-aside-body scrollable hover ng-scope" ui-view="aside@">
        <nav ui-nav class="ng-scope">
          <ul class="nav">
            <li class="nav-header h4 m-v-sm">大数据分析</li>
            <template v-for="(item) in menutwo">
              <li v-if="item.hasChild" v-bind:key="item.id">
                <a>
                  <span class="pull-right text-muted">
                    <i class="fa fa-caret-down"></i>
                  </span>
                  <i class="icon glyphicon text-lt" :class="item.icon"></i>
                  <span class="font-normal">{{item.name}}</span>
                </a>
                <ul class="nav nav-sub bg">
                  <li v-for="(subitem) in item.children" v-bind:key="subitem.id">
                    <a @click="subMenuClick(subitem)">{{subitem.name}}</a>
                  </li>
                </ul>
              </li>
              <li v-else v-bind:key="item.id">
                <a @click="subMenuClick(item)">
                  <b class="label bg-primary pull-right">NEW</b>
                  <i class="icon glyphicon text-lt" :class="item.icon"></i>
                  <span class="font-normal">{{item.name}}</span>
                </a>
              </li>
            </template>
          </ul>
        </nav>
      </div>
      <div class="app-aside-footer p text-xs text-center">
        <span>
          <strong class="text-lt">3.5</strong>GB
        </span>
        <div class="progress progress-xs bg no-margin m-h-xs inline w-xs">
          <div class="progress-bar progress-bar-info" style="width:30%"></div>
        </div>
        <span>10GB</span>
      </div>
    </div>
  </aside>
  <!-- / aside -->
</template>
<script>
import { mapGetters } from 'vuex';
import menuConfig from '../../config/menuConfg.js';
var _ = require('lodash/core');
export default {
  name: 'h_aside',
  data() {
    return {
      sildeColor: '',
      menutwo: [],
      bounds: [36193299.9058757, 4279101.15693256, 36586533.1437, 4515833.68722927]
    };
  },
  mounted() {
    this.sildeColor = this.asildeColor;
    this.initSlideMenu('');
  },
  watch: {
    asildeColor: function(newVal) {
      this.sildeColor = newVal;
    },
    currentmenu: function(newVal) {
      this.initSlideMenu(newVal);
      this.resizeMapExtent();
    }
  },
  methods: {
    initSlideMenu: function(item) {
      let currentItem = item == '' ? '数据概览' : item;
      let menu = _.find(menuConfig, function(o) {
        return o.name == currentItem;
      });
      this.menutwo = menu.children;
    },
    resizeMapExtent(){
      this.map.getView().setCenter([(this.bounds[2] + this.bounds[0]) / 2, (this.bounds[3] + this.bounds[1]) / 2 - 30000]);
      this.map.getView().setResolution(192.008399);
    },
    subMenuClick(item){
      this.$router.push({  //核心语句
        path:item.path,   //跳转的路径
      });
      this.resizeMapExtent();
    }

  },
  computed: { ...mapGetters(['currentmenu', 'asildeColor', 'map']) }
};
</script>

